<template>
  <div class="excel-container">
    <el-card class="export">
      <template #header>
        <el-button @click="onConfirm" type="primary">导出</el-button>
      </template>
      <el-table :data="exportData" border>
        <el-table-column prop="username" label="姓名" min-width="150" />
        <el-table-column prop="mobile" label="联系方式" min-width="150" />
        <el-table-column prop="openTime" label="开通时间" min-width="150">
          <template #default="scope">
            {{ dateFormat(scope.row.openTime) }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card class="import">
      <template #header>
        <div style="margin-bottom: 20px">
          <div style="margin-bottom: 8px">按钮:</div>
          <UploadExcel :onSuccess="onSuccess" />
        </div>
        <div>
          <div style="margin-bottom: 8px">拖拽:</div>
          <UploadExcel drag :onSuccess="onSuccess" />
        </div>
      </template>
      <div class="excel-table">
        <el-table :data="excelTableData.results" border>
          <el-table-column
            v-for="(item, index) in excelTableData.header"
            :key="index"
            :prop="item"
            :label="item"
            min-width="150"
          />
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import UploadExcel, {
  ISuccessResult,
} from "@/components/UploadExcel/index.vue";
import { dateFormat } from "@/utils/date";

const exportColumnData = [
  {
    label: "姓名",
    prop: "username",
  },
  {
    label: "联系方式",
    prop: "mobile",
  },
  {
    label: "开通时间",
    prop: "openTime",
  },
];

/**
 * 导出数据
 */
const exportData = [
  {
    role: [
      {
        id: "1",
        title: "超级管理员",
      },
    ],
    _id: "6511e6c0fb47643dea83e79a",
    id: "612710a9ec87aa543c9c3420",
    openTime: "1433088000000",
    username: "super-admin",
    mobile: "188xxxx0001",
  },
  {
    role: [
      {
        id: "2",
        title: "管理员",
      },
    ],
    _id: "6511e6c0fb47643dea83e79b",
    id: "612710a9ec87aa543c9c3421",
    username: "admin",
    openTime: "1559318400000",
    mobile: "188xxxx0002",
  },
  {
    role: [
      {
        id: "6",
        title: "员工",
      },
    ],
    _id: "6511e6c0fb47643dea83e79c",
    id: "612710a9ec87aa543c9c3422",
    username: "test",
    openTime: "1633017600000",
    mobile: "188xxxx0003",
  },
];

const USER_RELATIONS = {
  姓名: "username",
  联系方式: "mobile",
  角色: "role",
  开通时间: "openTime",
};

const onConfirm = async () => {
  // 导入工具包
  const excel = await import("@/utils/Export2Excel.js");
  const data = formatJson(USER_RELATIONS, exportData);
  excel.export_json_to_excel({
    // excel 表头
    header: Object.keys(USER_RELATIONS),
    // excel 数据（二维数组结构）
    data,
    // 文件名称
    filename: "导出的Excel文件",
    // 是否自动列宽
    autoWidth: true,
    // 文件类型
    bookType: "xlsx",
  });
};

// 该方法负责将数组转化成二维数组
const formatJson = (headers: any, rows: any) => {
  // 首先遍历数组
  // [{ username: '张三'},{},{}]  => [[’张三'],[],[]]
  return rows.map((item: any) => {
    return Object.keys(headers).map((key) => {
      // 时间特殊处理
      if (headers[key] === "openTime") {
        return dateFormat(item[headers[key]]);
      }
      // 角色特殊处理
      if (headers[key] === "role") {
        const roles = item[headers[key]];

        return JSON.stringify(roles.map((role: any) => role.title));
      }
      return item[headers[key]];
    });
  });
};

/**
 * excel导入 解析后的数据
 */
let excelTableData = ref<ISuccessResult>({
  header: [],
  results: [],
});

const onSuccess = (data: ISuccessResult) => {
  console.log("onSuccess:", data);
  excelTableData.value = data;
};
</script>

<style lang="scss" scoped>
.excel-container {
  .export {
    margin-bottom: 20px;
  }
  .import {
    .excel-table {
      margin-top: 20px;
    }
  }
}
</style>
